@mixin disabled {
  &[disabled] {
    background: #eee;
    border-color: rgba(38,38,38,0.08);
    color: #888;
  }
}

button[class*='-btn'] {
  height: $button-height;
  background: #F5F7F9;
  border-radius: 8px;
  border-color: #DBE6F1;
  color: #5B748B;
  @include disabled;
  box-shadow: none;
  padding-left: 8px;
  padding-right: 8px;
  text-shadow: none;
}
button[class*='-btn']:hover {
  border-color: #BBCEDF;
  color: #262626;
  background: #F5F7F9;
  @include disabled;
}
button[class*='-btn']:active {
  border-color: #8EA1B3;
  color: #262626;
  background: #E7F0F8;
  @include disabled;
}
button[class*='-btn']:focus {
  border-color: #8EE3F8;
  color: #262626;
  background: #fff;
  box-shadow: 0 0 2px #8EE3F8;
  @include disabled;
}
button[class*='btn-dashed'] {
  border-style: solid;
  border-color: #DBE6F1;
  color: #262626;
  background: #fff;
  @include disabled;
  &:hover {
    border-color: #BBCEDF;
    color: #262626;
    background: #E7F0F8;
  }
  &:active {
    border-color: #8EA1B3;
  }
}
button[class*='btn-text'] {
  border-color: transparent;
  background: transparent;
  &:hover {
    border-color: #F3FAFC;
    background: #F3FAFC;
  }
}
button[class*='btn-link'] {
  border-color: transparent;
  background: transparent;
  &:focus {
    border-color: transparent;
    background: transparent;
    box-shadow: unset;
    span {
      line-height: 1.2;
      border-radius: 4px;
      box-shadow: 0 0 2px #8EE3F8;
    }
  }
}
